<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-col :span="24">
          <a-form-item label="创建人" v-bind="validateInfos.userId">
	          <j-search-select v-model:value="formData.userId" dict="sys_user,realname,id" :disabled="disabled" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="运单号" v-bind="validateInfos.waybillNo">
            <a-input v-model:value="formData.waybillNo" placeholder="请输入运单号" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="提货时间" v-bind="validateInfos.deliveryTime">
		        <a-date-picker placeholder="请选择提货时间"  v-model:value="formData.deliveryTime" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="预计送达时间" v-bind="validateInfos.estArrivalTime">
		        <a-date-picker placeholder="请选择预计送达时间"  v-model:value="formData.estArrivalTime" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="发货人姓名" v-bind="validateInfos.shipperName">
            <a-input v-model:value="formData.shipperName" placeholder="请输入发货人姓名" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="发货人电话" v-bind="validateInfos.shipperPhone">
            <a-input v-model:value="formData.shipperPhone" placeholder="请输入发货人电话" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="发货人证件号" v-bind="validateInfos.shipperIdNum">
            <a-input v-model:value="formData.shipperIdNum" placeholder="请输入发货人证件号" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="发货人地区编码" v-bind="validateInfos.shipperAreaCode">
	          <j-area-select v-model:value="formData.shipperAreaCode" placeholder="请输入发货人地区编码" :disabled="disabled" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="发货人地区名称" v-bind="validateInfos.shipperAreaName">
            <a-input v-model:value="formData.shipperAreaName" placeholder="请输入发货人地区名称" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="发货人详细地址" v-bind="validateInfos.shipperDetailAddr">
	          <a-textarea v-model:value="formData.shipperDetailAddr" :rows="4" placeholder="请输入发货人详细地址" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="发货方经纬度" v-bind="validateInfos.shipperLnglat">
            <a-input v-model:value="formData.shipperLnglat" placeholder="请输入发货方经纬度" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收货方姓名" v-bind="validateInfos.consignerName">
            <a-input v-model:value="formData.consignerName" placeholder="请输入收货方姓名" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收货方电话" v-bind="validateInfos.consignerPhone">
            <a-input v-model:value="formData.consignerPhone" placeholder="请输入收货方电话" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收件方证件号" v-bind="validateInfos.consignerIdNum">
            <a-input v-model:value="formData.consignerIdNum" placeholder="请输入收件方证件号" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收货方地区编码" v-bind="validateInfos.consignerAreaCode">
	          <j-area-select v-model:value="formData.consignerAreaCode" placeholder="请输入收货方地区编码" :disabled="disabled" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收货方地区名称" v-bind="validateInfos.consignerAreaName">
            <a-input v-model:value="formData.consignerAreaName" placeholder="请输入收货方地区名称" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收货方详细地址" v-bind="validateInfos.consignerDetailAddr">
	          <a-textarea v-model:value="formData.consignerDetailAddr" :rows="4" placeholder="请输入收货方详细地址" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="收货方经纬度" v-bind="validateInfos.consignerLnglat">
            <a-input v-model:value="formData.consignerLnglat" placeholder="请输入收货方经纬度" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="货物名称" v-bind="validateInfos.cargoName">
            <a-input v-model:value="formData.cargoName" placeholder="请输入货物名称" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="货物件数" v-bind="validateInfos.cargoPieces">
	          <a-input-number v-model:value="formData.cargoPieces" placeholder="请输入货物件数" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="货物重量" v-bind="validateInfos.cargoWeight">
	          <a-input-number v-model:value="formData.cargoWeight" placeholder="请输入货物重量" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="货物体积" v-bind="validateInfos.cargoVolume">
	          <a-input-number v-model:value="formData.cargoVolume" placeholder="请输入货物体积" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="货物价值" v-bind="validateInfos.cargoPrice">
	          <a-input-number v-model:value="formData.cargoPrice" placeholder="请输入货物价值" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="货物备注" v-bind="validateInfos.cargoRemark">
            <a-input v-model:value="formData.cargoRemark" placeholder="请输入货物备注" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="代收款" v-bind="validateInfos.invoicingFee">
	          <a-input-number v-model:value="formData.invoicingFee" placeholder="请输入代收款" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="代收款支付方式" v-bind="validateInfos.invoicingPayMode">
	          <j-checkbox type="checkbox" v-model:value="formData.invoicingPayMode" dictCode="pay_mode" placeholder="请选择代收款支付方式" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="是否收取代收款" v-bind="validateInfos.izInvoicingFee">
	          <j-switch v-model:value="formData.izInvoicingFee" :options="[1,0]" :disabled="disabled"></j-switch>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="代收款订单号" v-bind="validateInfos.invoicingOrderNum">
            <a-input v-model:value="formData.invoicingOrderNum" placeholder="请输入代收款订单号" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="实际代收款支付方式" v-bind="validateInfos.invoicingRealPayMode">
	          <j-dict-select-tag v-model:value="formData.invoicingRealPayMode" dictCode="pay_mode" placeholder="请选择实际代收款支付方式" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="司机运费" v-bind="validateInfos.driverFreightFee">
	          <a-input-number v-model:value="formData.driverFreightFee" placeholder="请输入司机运费" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="结算运费状态" v-bind="validateInfos.settleFreightStatus">
	          <j-switch v-model:value="formData.settleFreightStatus" :options="[1,0]" :disabled="disabled"></j-switch>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="运费结算时间" v-bind="validateInfos.settleFreightTime">
		        <a-date-picker placeholder="请选择运费结算时间"  v-model:value="formData.settleFreightTime" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="运费结算方式" v-bind="validateInfos.settleFreightMode">
            <a-input v-model:value="formData.settleFreightMode" placeholder="请输入运费结算方式" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="是否指派司机" v-bind="validateInfos.izAssignDriver">
	          <j-switch v-model:value="formData.izAssignDriver" :options="[1,0]" :disabled="disabled"></j-switch>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="接单时间" v-bind="validateInfos.orderTime">
		        <a-date-picker placeholder="请选择接单时间"  v-model:value="formData.orderTime" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="接单用户" v-bind="validateInfos.driverUserId">
	          <j-search-select v-model:value="formData.driverUserId" dict="sys_user,realname,id" :disabled="disabled" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="司机车牌号" v-bind="validateInfos.driverVehicleNo">
            <a-input v-model:value="formData.driverVehicleNo" placeholder="请输入司机车牌号" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="司机电话" v-bind="validateInfos.driverPhone">
            <a-input v-model:value="formData.driverPhone" placeholder="请输入司机电话" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="司机姓名" v-bind="validateInfos.driverName">
            <a-input v-model:value="formData.driverName" placeholder="请输入司机姓名" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="司机银行卡" v-bind="validateInfos.driverBankId">
            <a-input v-model:value="formData.driverBankId" placeholder="请输入司机银行卡" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="司机银行开户名" v-bind="validateInfos.driverBankHolder">
            <a-input v-model:value="formData.driverBankHolder" placeholder="请输入司机银行开户名" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="司机银行卡号" v-bind="validateInfos.driverBankCardNo">
            <a-input v-model:value="formData.driverBankCardNo" placeholder="请输入司机银行卡号" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="司机开户银行" v-bind="validateInfos.driverBankName">
            <a-input v-model:value="formData.driverBankName" placeholder="请输入司机开户银行" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="浏览量" v-bind="validateInfos.scanNum">
	          <a-input-number v-model:value="formData.scanNum" placeholder="请输入浏览量" style="width: 100%" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="评论量" v-bind="validateInfos.commentNum">
            <a-input v-model:value="formData.commentNum" placeholder="请输入评论量" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="订单状态" v-bind="validateInfos.waybillStatus">
	          <j-dict-select-tag v-model:value="formData.waybillStatus" dictCode="waybill_status" placeholder="请选择订单状态" :disabled="disabled"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="状态" v-bind="validateInfos.status">
	          <j-dict-select-tag v-model:value="formData.status" dictCode="row_status" placeholder="请选择状态" :disabled="disabled"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
  import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';
  import JAreaSelect from '/@/components/Form/src/jeecg/components/JAreaSelect.vue';
  import JCheckbox from "/@/components/Form/src/jeecg/components/JCheckbox.vue";
  import { getValueType } from '/@/utils';
  import { saveOrUpdate } from '../WlhyWaybill.api';
  import { Form } from 'ant-design-vue';
  
  const props = defineProps({
    formDisabled: { type: Boolean, default: false },
    formData: { type: Object, default: ()=>{} },
    formBpm: { type: Boolean, default: true }
  });
  const formRef = ref();
  const useForm = Form.useForm;
  const emit = defineEmits(['register', 'ok']);
  const formData = reactive<Record<string, any>>({
    id: '',
    userId: '',   
    waybillNo: '',   
    deliveryTime: '',   
    estArrivalTime: '',   
    shipperName: '',   
    shipperPhone: '',   
    shipperIdNum: '',   
    shipperAreaCode: '',   
    shipperAreaName: '',   
    shipperDetailAddr: '',   
    shipperLnglat: '',   
    consignerName: '',   
    consignerPhone: '',   
    consignerIdNum: '',   
    consignerAreaCode: '',   
    consignerAreaName: '',   
    consignerDetailAddr: '',   
    consignerLnglat: '',   
    cargoName: '',   
    cargoPieces: undefined,
    cargoWeight: undefined,
    cargoVolume: undefined,
    cargoPrice: undefined,
    cargoRemark: '',   
    invoicingFee: undefined,
    invoicingPayMode: '',   
    izInvoicingFee: undefined,
    invoicingOrderNum: '',   
    invoicingRealPayMode: '',   
    driverFreightFee: undefined,
    settleFreightStatus: undefined,
    settleFreightTime: '',   
    settleFreightMode: '',   
    izAssignDriver: undefined,
    orderTime: '',   
    driverUserId: '',   
    driverVehicleNo: '',   
    driverPhone: '',   
    driverName: '',   
    driverBankId: '',   
    driverBankHolder: '',   
    driverBankCardNo: '',   
    driverBankName: '',   
    scanNum: undefined,
    commentNum: '',   
    waybillStatus: '',   
    status: '',   
  });
  const { createMessage } = useMessage();
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
  const confirmLoading = ref<boolean>(false);
  //表单验证
  const validatorRules = {
  };
  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });

  // 表单禁用
  const disabled = computed(()=>{
    if(props.formBpm === true){
      if(props.formData.disabled === false){
        return false;
      }else{
        return true;
      }
    }
    return props.formDisabled;
  });

  
  /**
   * 新增
   */
  function add() {
    edit({});
  }

  /**
   * 编辑
   */
  function edit(record) {
    nextTick(() => {
      resetFields();
      const tmpData = {};
      Object.keys(formData).forEach((key) => {
        if(record.hasOwnProperty(key)){
          tmpData[key] = record[key]
        }
      })
      //赋值
      Object.assign(formData, tmpData);
    });
  }

  /**
   * 提交数据
   */
  async function submitForm() {
    // 触发表单验证
    await validate();
    confirmLoading.value = true;
    const isUpdate = ref<boolean>(false);
    //时间格式化
    let model = formData;
    if (model.id) {
      isUpdate.value = true;
    }
    //循环数据
    for (let data in model) {
      //如果该数据是数组并且是字符串类型
      if (model[data] instanceof Array) {
        let valueType = getValueType(formRef.value.getProps, data);
        //如果是字符串类型的需要变成以逗号分割的字符串
        if (valueType === 'string') {
          model[data] = model[data].join(',');
        }
      }
    }
    await saveOrUpdate(model, isUpdate.value)
      .then((res) => {
        if (res.success) {
          createMessage.success(res.message);
          emit('ok');
        } else {
          createMessage.warning(res.message);
        }
      })
      .finally(() => {
        confirmLoading.value = false;
      });
  }


  defineExpose({
    add,
    edit,
    submitForm,
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    height: 500px !important;
    overflow-y: auto;
    padding: 14px;
  }
</style>
